/**
 * 建议卡片组件
 * 显示AI建议的卡片，支持点击应用
 */

import React from 'react';
import { Card, Button, Tag, Space } from 'antd';
import {
  BulbOutlined,
  BarChartOutlined,
  LinkOutlined,
  FileTextOutlined,
  EditOutlined,
  CheckCircleOutlined,
  TranslationOutlined,
  UnorderedListOutlined,
  PlusCircleOutlined,
  SoundOutlined,
} from '@ant-design/icons';
import type { Suggestion, SuggestionType, SuggestionPriority } from '@/stores/copilot.store';
import './style.css';

interface SuggestionCardProps {
  suggestion: Suggestion;
  onApply: (id: string) => void;
  onDismiss?: (id: string) => void;
}

/**
 * 获取建议类型图标
 */
const getTypeIcon = (type: SuggestionType) => {
  const iconMap: Record<SuggestionType, React.ReactNode> = {
    add_example: <BulbOutlined />,
    add_data: <BarChartOutlined />,
    add_transition: <LinkOutlined />,
    explain_concept: <FileTextOutlined />,
    summarize: <UnorderedListOutlined />,
    expand: <PlusCircleOutlined />,
    fix_logic: <CheckCircleOutlined />,
    improve_style: <EditOutlined />,
  };

  return iconMap[type] || <BulbOutlined />;
};

/**
 * 获取优先级颜色
 */
const getPriorityColor = (priority: SuggestionPriority): string => {
  const colorMap: Record<SuggestionPriority, string> = {
    high: 'red',
    medium: 'orange',
    low: 'blue',
  };

  return colorMap[priority];
};

/**
 * 获取优先级文本
 */
const getPriorityText = (priority: SuggestionPriority): string => {
  const textMap: Record<SuggestionPriority, string> = {
    high: '重要',
    medium: '建议',
    low: '可选',
  };

  return textMap[priority];
};

export const SuggestionCard: React.FC<SuggestionCardProps> = ({
  suggestion,
  onApply,
  onDismiss,
}) => {
  const handleApply = () => {
    onApply(suggestion.id);
  };

  const handleDismiss = () => {
    if (onDismiss) {
      onDismiss(suggestion.id);
    }
  };

  return (
    <Card
      className="suggestion-card"
      size="small"
      bordered
      hoverable
    >
      <div className="suggestion-header">
        <Space>
          <span className="suggestion-icon">
            {suggestion.icon || getTypeIcon(suggestion.type)}
          </span>
          <span className="suggestion-title">{suggestion.title}</span>
        </Space>
        <Tag color={getPriorityColor(suggestion.priority)}>
          {getPriorityText(suggestion.priority)}
        </Tag>
      </div>

      <p className="suggestion-description">{suggestion.description}</p>

      <div className="suggestion-actions">
        <Button
          type="primary"
          size="small"
          onClick={handleApply}
          icon={<CheckCircleOutlined />}
        >
          {suggestion.actionText}
        </Button>
        {onDismiss && (
          <Button size="small" onClick={handleDismiss}>
            忽略
          </Button>
        )}
      </div>
    </Card>
  );
};
